<template>
  <!-- 十八项反措 -->
  <div class="container">
    <div class="container-top">
      <div class="back" @click="goBack"></div>
    </div>
    <div class="head borderStyle centerbox relative">
      <div class="title centertitleStyle centerbox title-relative">十八项反措</div>
      <!-- 十八项反措中部 -->
      <div class="echa">
        <v-chart :auto-resize="true" :options="newOption" @click="clickEvent" />
      </div>
    </div>
    <div class="center">
      <div class="inspection-report-h bigTableStyle">
        <div class="inspection-report-index">
          <div class="fromed">
            <el-form ref="elForm" :model="formData" :rules="rules" label-width="1.4rem">
              <el-row :gutter="15">
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="所属单位:" prop="time">
                        <el-select
                          v-model="formData.company"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="(item, index) in CompanyList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="维护班组:" prop>
                        <el-select
                          v-model="formData.team"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="(item, index) in TeamList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="变电站:" prop="source">
                        <el-select
                          v-model="formData.substation"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          filterable
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in SubstationList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="设备类型:" prop="area">
                        <el-select
                          v-model="formData.deviceType"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                          filterable
                          @change="getmeasureTypeList"
                        >
                          <el-option
                            v-for="(item, index) in DeviceTypeList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="反措类型:" prop="unit">
                        <el-select
                          v-model="formData.measureType"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in measureTypeList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="电压等级:" prop="unit">
                        <el-select
                          v-model="formData.Voltage"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in VoltageList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="4">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="是否整改:" prop="identify">
                        <el-select
                          v-model="formData.isClear"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in isClearList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="计划整改时间:" prop="source">
                        <el-date-picker
                          :style="{width: '100%'}"
                          v-model="formData.cleartime"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="pickerOptions"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <div class="inspection-report-index-btn">
                    <el-button
                      class="table-query"
                      type="primary"
                      @click="submitForm"
                      icon="el-icon-search"
                    >查询</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="tableed">
            <el-table
            border
              :data="tableData"
              height="100%"
              :row-class-name="tableRowClassName"
              style="width: 100%;height:100%;"
            >
              <el-table-column prop="myIndex" label="序号" width="60" show-overflow-tooltip></el-table-column>
              <el-table-column prop="SSDSMC" label="所属地市" show-overflow-tooltip></el-table-column>
              <el-table-column prop="WHBZMC" label="维护班组" show-overflow-tooltip></el-table-column>
              <el-table-column prop="BDZMC" label="变电站名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="SBMC" label="设备名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="SBLXMC" label="设备类型" show-overflow-tooltip></el-table-column>
              <el-table-column prop="DMMC" label="电压等级(kV)" show-overflow-tooltip></el-table-column>
              <el-table-column prop="FCLX" label="反措类型" show-overflow-tooltip></el-table-column>
              <el-table-column prop="FCTW" label="反措内容" show-overflow-tooltip></el-table-column>
              <el-table-column prop="SFFC" label="是否落实" show-overflow-tooltip></el-table-column>
              <el-table-column prop="SFZG" label="是否整改" show-overflow-tooltip></el-table-column>
              <el-table-column prop="ZGXZ" label="整改现状" show-overflow-tooltip></el-table-column>
              <el-table-column prop="ZGSJ" label="计划整改时间" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
          <div class="paged elPaginationStyle">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pages.page"
              :page-sizes="[10, 20, 30]"
              :page-size="pages.pageSize"
              layout="total,prev, pager, next,sizes, jumper"
              :total="pages.totalSize"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { publicAPIModule } from "@/store/modules/public";
import { JointInspectionModule } from "@/store/modules/JointInspection";
//loadsh
import lodash from "lodash";
@Component({
  components: {
    // DefectsHead,
    // DefectsCenter,
    // DefectsBottom,
  },
})
export default class Defects extends Vue {
  // 所属地市
  // private localCity: string = "8a1ea5c64bdebad1014bdebc55c80162";

  // 所属地市
  get CompanyListlocalCity() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }

  //传图表得数据
  public xAxisData: any = ["人工发现", "自动巡检"];

  public option: Object = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      // left: 'center',
      right: "2%",
      top: "2%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 14,
      itemHeight: 12,
      // itemGap: 35
    },

    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        lineStyle: {
          color: "rgba(115,129,167,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      // name: "单位：个",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        // name: (this as any).xAxisData[0],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          // normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#38F7F2",
            },
            {
              offset: 1,
              color: "#264C9C",
            },
          ]),
          // barBorderRadius: 11,
          // },
        },
        label: {
          show: true,
          position: "top",
          distance: 10,
          color: "#ffffff",
        },
        data: [],
      },
    ],
  };

  // 点击柱图切换表格数据
  private clickEvent(v: any) {
    // console.log("vvvvvvvvvv:", v);
    let date = new Date();
    let lastyear = date.getFullYear() - 1;
    let thisyear = date.getFullYear();
    let nextyear = date.getFullYear() + 1;
    if (v.name == "满足") {
      this.formData.isClear = "是";
      this.formData.fcbs = "ylsfc";
      this.formData.fcTime = "";
    } else if (v.name == "不满足") {
      this.formData.isClear = "否";
      this.formData.fcbs = "wlsfc";
      this.formData.fcTime = "";
    } else if (v.name == lastyear) {
      let time = [lastyear + "-01-01", lastyear + "-12-31"];
      this.formData.cleartime = time;
      this.formData.fcbs = lastyear + "";
      this.formData.fcTime = lastyear + "";
    } else if (v.name == thisyear) {
      let time = [thisyear + "-01-01", thisyear + "-12-31"];
      this.formData.cleartime = time;
      this.formData.fcbs = thisyear + "";
      this.formData.fcTime = thisyear + "";
    } else if (v.name == nextyear) {
      let time = [nextyear + "-01-01", nextyear + "-12-31"];
      this.formData.cleartime = time;
      this.formData.fcbs = nextyear + "";
      this.formData.fcTime = nextyear + "";
    }
    this.queryAuxRealtimeList();
  }

  // 获取十八项反措柱图数据,更新option
  get newOption() {
    // console.log("this.defectStatistics:", this.defectStatistics);
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.dataList;
    let rgData = [
      robotInspection.satisfy,
      robotInspection.dissatisfy,
      robotInspection.lastyear,
      robotInspection.thisyear,
      robotInspection.nextyear,
    ];
    let date = new Date();
    let thisyear = date.getFullYear();
    let lastyear = date.getFullYear() - 1;
    let nextyear = date.getFullYear() + 1;
    let xData = ["满足", "不满足", lastyear, thisyear, nextyear];
    (option as any).series[0].data = rgData;
    (option as any).xAxis.data = xData;
    return option;
  }

  // 返回按钮
  private goBack(val: string) {
    window.history.back();
    // this.$router.push("index");
  }

  //搜索框from表单数据
  formData = {
    company: "", // 所属单位
    team: "", // 维护班组
    substation: "", // 变电站
    fcTime: "", // 反措标识传入为时间
    fcbs: "", // 反措标识
    deviceType: "", // 设备类型
    measureType: "", // 反措类型
    Voltage: "", // 电压等级
    isClear: "", // 是否整改
    cleartime: [], // 计划整改时间
  };
  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  $refs!: {
    elForm: any;
  };

  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = publicAPIModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站电压等级
  get VoltageList() {
    let VoltageList = publicAPIModule.VoltageList || [];
    return VoltageList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = publicAPIModule.SubstationList || [];
    return SubstationList;
  }
  // 下拉框运维班组
  get TeamList() {
    let TeamList = publicAPIModule.TeamList || [];
    return TeamList;
  }
  // 下拉框设备类型
  get DeviceTypeList() {
    let DeviceTypeList = publicAPIModule.DeviceTypeList || [];
    return DeviceTypeList;
  }
  // 反措类型
  private measureTypeList = [
    {
      id: "",
      name: "",
    },
  ];
  // 是否整改
  private isClearList = [
    {
      code: "",
      name: "全部",
    },
    {
      code: "是",
      name: "是",
    },
    {
      code: "否",
      name: "否",
    },
  ];

  // 根据设备类型获取反措类型
  private getmeasureTypeList(val: any) {
    // console.log("val:", val);
    // 获取反措类型
    (this as any).$services
      .getFcType({
        method: "get",
        data: { id: val },
      })
      .then((result: any) => {
        console.log("反措类型:", result);
        this.measureTypeList = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 监听反措类型变化
  @Watch("measureTypeList", { immediate: true, deep: true })
  getBarData(measureTypeList: any) {
    if (measureTypeList[0]) {
      this.formData.measureType = measureTypeList[0].id;
    } else {
      this.formData.measureType = "";
    }
  }

  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      company: "", // 所属单位
      team: "", // 维护班组
      substation: "", // 变电站
      fcTime: "", // 反措标识传入为时间
      fcbs: "", // 反措标识
      deviceType: "", // 设备类型
      measureType: "", // 反措类型
      Voltage: "", // 电压等级
      isClear: "", // 是否整改
      cleartime: [], // 计划整改时间
    };
    this.queryAuxRealtimeList();
  }

  //table表格相关事件数据
  tableData = [
    {
      CITY: "",
      WHBZMC: "",
      STATIONNAME: "",
      DEVICENAME: "",
      DEVICETYPE: "",
      DYDJNAME: "",
      FCLX: "",
      FCTW: "",
      SFFC: "",
      SFZG: "",
      ZGXZ: "",
      JHZGSJ: "",
    },
  ];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  verify(scope: any) {
    // console.log(scope.row);
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }
  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData.cleartime:", this.formData.cleartime);
    let form = {
      city: this.formData.company, // 所属单位ID
      deviceType: this.formData.deviceType, // 设备类型
      dydj: this.formData.Voltage, // 电压等级
      fcTime: this.formData.fcTime, // 反措标识传入为时间
      fcbs: this.formData.fcbs, // 反措标识
      fclx: this.formData.measureType, // 反措类型
      page: this.pages.page, // 第几页
      planStartTime:
        this.formData.cleartime == null ? "" : this.formData.cleartime[0], // 计划整改开始时间
      planEndTime:
        this.formData.cleartime == null ? "" : this.formData.cleartime[1], // 计划整改结束时间
      sfzg: this.formData.isClear, // 是否整改
      size: this.pages.pageSize, // 每页条数
      stationId: this.formData.substation, // 变电站ID
      whbz: this.formData.team, // 维护班组ID
    };
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getEighteenList({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        let data = result.data;
          let page = this.pages.page;
      let size = this.pages.pageSize;
        this.tableData = data.records.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  private annualStatistics;
  private satisfy;
  private dissatisfy;
  private dataList = {
    satisfy: "",
    dissatisfy: "",
    lastyear: "",
    thisyear: "",
    nextyear: "",
  };
  private init() {
    var localCity = "";
    if (
      this.CompanyListlocalCity &&
      this.CompanyListlocalCity[0] &&
      this.CompanyListlocalCity[0].code
    ) {
      localCity = this.CompanyListlocalCity[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    // 获取十八项反措统计满足不满足
    (this as any).$services
      .eighteenCounterMeasuresStatistics({
        method: "get",
        data: { localCity: localCity },
      })
      .then((result: any) => {
        console.log("十八项反措统计满足不满足:", result);
        this.dataList.satisfy = result.data[0].ylsfc;
        this.dataList.dissatisfy = result.data[0].wlsfc;
        // console.log("this.satisfy,this.dissatisfy,this.maxValue:",this.satisfy,this.dissatisfy,this.maxValue)
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取十八项反措年统计
    (this as any).$services
      .annualStatistics({
        method: "get",
        data: { localCity: localCity },
      })
      .then((result: any) => {
        console.log("十八项反措年统计:", result);
        this.dataList.lastyear = result.data[0].count;
        this.dataList.thisyear = result.data[1].count;
        this.dataList.nextyear = result.data[2].count;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // created() {
  //   // console.log("this.$route.query:", this.$route.query.CounterMeasuresData);
  //   this.init();
  // }

  mounted() {
    this.init();
    if (this.$route.query.isSatisfy) {
      // this.formData.isClear = this.$route.query.isSatisfy;
      if (this.$route.query.isSatisfy == "是") {
        this.formData.fcbs = "ylsfc";
      } else if (this.$route.query.isSatisfy == "否") {
        this.formData.fcbs = "wlsfc";
      }
    }
    if (this.$route.query.year) {
      let date = new Date();
      let lastyear = date.getFullYear() - 1;
      let thisyear = date.getFullYear();
      let nextyear = date.getFullYear() + 1;
      if (this.$route.query.year == lastyear + "年计划") {
        let time = [lastyear + "-01-01", lastyear + "-12-31"];
        this.formData.cleartime = time;
        this.formData.fcbs = lastyear + "";
        this.formData.fcTime = lastyear + "";
      } else if (this.$route.query.year == thisyear + "年计划") {
        let time = [thisyear + "-01-01", thisyear + "-12-31"];
        this.formData.cleartime = time;
        this.formData.fcbs = thisyear + "";
        this.formData.fcTime = thisyear + "";
      } else if (this.$route.query.year == nextyear + "年计划") {
        let time = [nextyear + "-01-01", nextyear + "-12-31"];
        this.formData.cleartime = time;
        this.formData.fcbs = nextyear + "";
        this.formData.fcTime = nextyear + "";
      }
      console.log('this.formData:',this.formData);
      
    }
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 0.27rem;
  &-top {
    width: 100%;
    // height: 2%;
    // background-color: pink;
    display: flex;
    align-items: center;
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }
  .head {
    width: 100%;
    height: 26%;
    padding-top: 1%;
    // background-color: grey;
    // margin-bottom: 0.29rem;
    .echa {
      width: 100%;
      height: 100%;
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
  }
  .center {
    width: 100%;
    height: 70%;
    padding-top: 1%;
    // background-color: pink;
    // margin-bottom: 0.38rem;
    .inspection-report-h {
      width: 100%;
      height: 100%;
      // padding: 0.24rem;
      .inspection-report-index {
        width: 100%;
        height: 100%;
        &-btn {
          display: flex;
          justify-content: flex-end;
        }
        .fromed {
          height: 120px;
        }
        .tableed {
          height: calc(100% - 180px);
        }
        .paged {
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .iconfont {
        cursor: pointer;
      }
    }
  }
  .bottom {
    width: 100%;
    // height: 56%;
    // background-color: rgb(179, 245, 177);
  }
}
</style>

<style lang="scss" scoped>
.table-query {
  width: 1.4rem;
}
</style>
